<template>
    <div class="app">
      <div class="filter-bar">
        单号/设备:<input type="text" placeholder="请输入单号/设备" v-model="filters.query" style="width: 160px;margin-left: 7px;"/>
        <el-date-picker
          v-model="filters.startDate"
          type="date"
          placeholder="开始日期"
          style="margin: 0 8px;width: 140px;"
        ></el-date-picker>
        至
        <el-date-picker
          v-model="filters.endDate"
          type="date"
          placeholder="结束日期"
          style="margin: 0 8px;width: 140px;"
        ></el-date-picker>
        <el-select v-model="filters.status" placeholder="状态" style="width: 120px;">
          <el-option label="全部" value=""></el-option>
          <el-option label="已修好" value="已修好"></el-option>
          <el-option label="待指派" value="待指派"></el-option>
        </el-select>
        <!-- 维修类型选择 -->
        <el-select v-model="filters.repairType" placeholder="维修类型" style="width: 120px; margin-left: 8px;">
        <el-option label="全部" value=""></el-option>
        <el-option label="电气维修" value="电气维修"></el-option>
        <el-option label="机械维修" value="机械维修"></el-option>
        <el-option label="其他" value="其他"></el-option>
        </el-select>

        <!-- 故障类型选择 -->
        <el-select v-model="filters.faultType" placeholder="故障类型" style="width: 120px; margin-left: 8px; margin-right: 7px;">
        <el-option label="全部" value=""></el-option>
        <el-option label="系统故障" value="系统故障"></el-option>
        <el-option label="电路故障" value="电路故障"></el-option>
        <el-option label="设备老化" value="设备老化"></el-option>
        </el-select>



        <el-button type="primary" @click="filterTable">
          查询
        </el-button>
      </div>

      <el-table :data="filteredData" stripe border>
        <el-table-column prop="id" label="#" width="50"></el-table-column>
        <el-table-column prop="orderNo" label="单号" width="150"></el-table-column>
        <el-table-column prop="location" label="地点" width="150"></el-table-column>
        <el-table-column prop="device" label="设备" width="180"></el-table-column>
        <el-table-column prop="deviceCode" label="设备编号" width="120"></el-table-column>
        <el-table-column prop="faultDescription" label="故障描述" width="200"></el-table-column>
        <el-table-column prop="repairman" label="报修人" width="100"></el-table-column>
        <el-table-column prop="repairGroup" label="报修部门组" width="200"></el-table-column>
        <el-table-column prop="repairTime" label="报修时间" width="200"></el-table-column>
        <el-table-column label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === '已修好' ? 'success' : 'danger'">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="text" @click="viewDetails(scope.row)">
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog :visible.sync="detailDialogVisible" title="报修详情" width="70%" center>
    <div class="detail-content">
      <section class="section section-basic-info">
        <h3 class="section-title">报修详情</h3>
        <div class="info-grid">
          <div class="info-item"><span>设备名称：</span>{{ selectedRow.device }}</div>
          <div class="info-item"><span>设备编号：</span>{{ selectedRow.deviceCode }}</div>
          <div class="info-item"><span>地点：</span>{{ selectedRow.location }}</div>
          <div class="info-item"><span>点检人员：</span>{{ selectedRow.repairman }}</div>
          <div class="info-item"><span>点检时间：</span>{{ selectedRow.repairTime }}</div>
        </div>
      </section>

      <section class="section">
        <h3 class="section-title">维修信息</h3>
        <div class="info-grid">
          <div class="info-item"><span>维修描述：</span>测试的</div>
          <div class="info-item"><span>维修时间：</span>2023-05-13 15:49:43</div>
          <div class="info-item"><span>故障类型：</span>测试</div>
          <div class="info-item"><span>维修人：</span>测试维修人</div>
        </div>
      </section>

      <section class="section">
        <h3 class="section-title">物料信息</h3>
        <el-table :data="materialInfo" stripe>
          <el-table-column prop="materialNo" label="物料号" width="150"></el-table-column>
          <el-table-column prop="name" label="名称" width="150"></el-table-column>
          <el-table-column prop="model" label="型号" width="150"></el-table-column>
          <el-table-column prop="quantity" label="数量" width="80"></el-table-column>
        </el-table>
      </section>

      <section class="section">
        <h3 class="section-title">流转信息</h3>
        <el-table :data="workflowInfo" stripe>
          <el-table-column prop="operator" label="操作人" width="150"></el-table-column>
          <el-table-column prop="action" label="操作内容" width="150"></el-table-column>
          <el-table-column prop="time" label="操作时间" width="200"></el-table-column>
          <el-table-column prop="status" label="保修单状态" width="100"></el-table-column>
        </el-table>
      </section>
    </div>
  </el-dialog>
    </div>
  </template>

  <script>
  export default {
    data() {
      return {

        filters: {
        //   faultType: "",
        //   repairType: "",
          query: "",
          startDate: "",
          endDate: "",
          status: "",
        },
        tableData: [
          {
            id: 1,
            orderNo: "WX2305039",
            location: "省医院",
            device: "07集水井（治疗区）",
            deviceCode: "JS16",
            faultDescription: "系统故障",
            repairman: "诸文沛",
            repairGroup: "管理部",
            repairTime: "2023-05-13 15:35:39",
            status: "已修好",
          },
          {
            id: 2,
            orderNo: "WX2305038",
            location: "省医院",
            device: "03集水井5",
            deviceCode: "JS5",
            faultDescription: "设备老化",
            repairman: "诸文沛",
            repairGroup: "管理部",
            repairTime: "2023-05-13 15:32:16",
            status: "已修好",
          },
          {
            id: 3,
            orderNo: "WX2309048",
            location: "省医院",
            device: "潜水搅拌机1",
            deviceCode: "P04",
            faultDescription: "线路导致跳闸",
            repairman: "诸胜利",
            repairGroup: "省医院",
            repairTime: "2023-09-18 09:33:22",
            status: "待指派",
          },
          {
            id: 4,
            orderNo: "WX2309047",
            location: "省医院",
            device: "潜水搅拌机1",
            deviceCode: "P04",
            faultDescription: "井下线路导致跳闸，如同上次的情况",
            repairman: "诸胜利",
            repairGroup: "省医院",
            repairTime: "2023-09-17 19:08:15",
            status: "待指派",
          },
        ],
        detailDialogVisible: false,
        selectedRow: {},
        materialInfo: [
            {
            materialNo: "SL0004",
            name: "润滑油",
            model: "YS-0017",
            quantity: 1,
            },
        ],
        workflowInfo: [
            { operator: "廖勇强", action: "修好", time: "2023-05-13 15:49:43", status: "已修好" },
            { operator: "廖勇强", action: "受理", time: "2023-05-13 15:48:28", status: "待维修" },
            { operator: "诸文沛", action: "指派", time: "2023-05-13 15:36:44", status: "新报修" },
            { operator: "诸文沛", action: "报修", time: "2023-05-13 15:35:39", status: "新报修" },
        ],
      };
    },
    computed: {
      filteredData() {
        let data = this.tableData;

        if (this.filters.query) {
          data = data.filter((item) =>
            Object.values(item).some((val) =>
              String(val).includes(this.filters.query)
            )
          );
        }
        if (this.filters.startDate) {
          data = data.filter(
            (item) => new Date(item.repairTime) >= new Date(this.filters.startDate)
          );
        }
        if (this.filters.endDate) {
          data = data.filter(
            (item) => new Date(item.repairTime) <= new Date(this.filters.endDate)
          );
        }
        if (this.filters.status) {
          data = data.filter((item) => item.status === this.filters.status);
        }
        return data;
      },
    },
    methods: {
      viewDetails(row) {
        this.selectedRow = row; // 保存当前行的数据
        this.detailDialogVisible = true; // 打开弹窗
      },
      filterTable() {
        // 触发重新计算过滤数据
      },
    },
  };
  </script>

  <style scoped>

  .app {
    padding: 20px;
  }

  .filter-bar {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
  }

  .filter-bar input {
    width: 300px;
    padding: 5px 10px;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
  }

  .el-date-picker {
    width: 150px;
  }

  .el-table {
    background-color: white;
    border-radius: 4px;
  }
  .detail-content {
  padding: 10px 15px;
  color: #333;
  font-size: 14px;
}

.section {
  margin-bottom: 20px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #409eff;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.info-item {
  padding: 5px 0;
  font-size: 14px;
}

.info-item span {
  font-weight: bold;
  color: #606266;
}

.el-table {
  border-radius: 6px;
  border: 1px solid #ebeef5;
}

.el-dialog {
  border-radius: 10px;
  overflow: hidden;
}

.section-basic-info {
  background: #f9f9f9;
  padding: 10px 15px;
  border-radius: 5px;
}

.section-basic-info .info-grid {
  grid-template-columns: repeat(2, 1fr);
}
  </style>
